<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<meta name="HandheldFriendly" content="true"/>
	<meta name="MobileOptimized" content="320"/>
	<title></title>
	<script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
	<script type="text/javascript">	
		var p=null;
		var iLast=2,MAX=20;
		var up=null,down=null,offset=50;
		var t=null;
		// H5 plus事件处理
		function plusReady(){
			// 锁定只能竖屏显示
			plus.screen.lockOrientation('portrait-primary');
			// 监听加速度
			plus.accelerometer.watchAcceleration(function(a){
				if(!up){
					return;
				}
				if(!p && ( Math.abs(a.xAxis)+Math.abs(a.yAxis)+Math.abs(a.zAxis) > MAX )){
					// Play audio
					p = plus.audio.createPlayer('_www/audio/shake.wav');
					p.play();
					setTimeout(function(){
						// Change background image
						var index = Math.round(Math.random()*3+1);
						if ( iLast == index ) {
							index++;
							if ( index > 4 ) {
								index = 1;
							}
						}
						iLast = index;
						// Stop play audio
						p.stop();
						delete p;
						p = null;
					}, 2000 );
					// Animation
					offset=up.offsetHeight/2;
					up.style.webkitTransform = 'translateY(-'+offset+'px)';
					up.style.msTransform = 'translateY(-'+offset+'px)';
					down.style.webkitTransform = 'translateY('+offset+'px)';
					down.style.msTransform = 'translateY('+offset+'px)';
					if(t){
						clearTimeout(t);
					}
					t = setTimeout(function(){
						t = null;
						up.style.webkitTransform = '';
						up.style.msTransform = '';
						down.style.webkitTransform = '';
						down.style.msTransform = '';
					}, 700 );
				}
			}, function(e){
				
			}, {frequency:100});
		}
		if(window.plus){
			plusReady();
		}else{
			document.addEventListener('plusready', plusReady, false);
		}
		// 监听DOMContentLoaded事件
		document.addEventListener('DOMContentLoaded', function(){
			up=document.getElementById('up');
			down=document.getElementById('down');
			offset=up.offsetHeight/2;
		},false);
		// 解锁并关闭
		var _back=window.back;
		function unlockback(){
			plus.screen.unlockOrientation();
			_back();
		}
		window.back=unlockback;
	</script>		
	</head>
	<body style="background: center center no-repeat url(img/1.jpg);">
		<header class="mui-bar mui-bar-nav myHeader" style="box-shadow: none;background: red;">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"><span style="font-size: 15px;">发现</span></a>
		    <h1 class="mui-title" style="color: white;">摇一摇</h1>
		</header>
		<div style="height:100%;text-align:center;overflow:hidden;margin-top: 44px;">
			<div id="up" style="width:100%;height:50%;background:#333;-webkit-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;">
				<img style="height:50%;" src="img/shakeup.png"/>
			</div>
			<div id="down" style="width:100%;height:50%;background:#333;-webkit-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;">
				<img style="height:50%;" src="img/shakedown.png"/>
			</div>
		</div>
		<nav class="mui-bar mui-bar-tab">
		    <a class="mui-tab-item mui-active">
		        <span class="mui-icon mui-icon-contact"></span>
		        <span class="mui-tab-label">人</span>
		    </a>
		    <a class="mui-tab-item">
		        <span class="mui-icon mui-icon-starhalf"></span>
		        <span class="mui-tab-label">歌曲</span>
		    </a>
		    <a class="mui-tab-item">
		        <span class="mui-icon mui-icon-upload"></span>
		        <span class="mui-tab-label">电视</span>
		    </a>
		</nav>
	<script>
		mui.init();
    </script>
	</body>	
</html>